// 弹窗组件
.el-dialog {
  border-radius: 4px;

  .el-dialog__header {
    border-bottom: 1px solid #ececec;

    .el-dialog__title {
      font-weight: 500;
      color: #333333;
    }
  }

  .el-dialog__body {
    padding: 24px;
    max-height: calc(88vh - 110px);
    overflow-y: auto;
  }

  .el-dialog__footer {
    padding: 10px 20px;
    border-top: 1px solid #ececec;
  }
}

// 表单组件
.dialog-form {
  display: flex;
  flex-wrap: wrap;
  --form-item-width: 100%;

  .el-form-item {
    margin-bottom: 20px;
    width: var(--form-item-width);

    .el-form-item__label {
      text-align: right;
      font-size: 14px;
      color: #757778;
      padding-right: 8px;
      font-weight: normal;
      line-height: 32px;
    }

    .el-form-item__content {
      padding-right: 20px;
      // height: 32px;
      border-radius: 4px;
      line-height: 32px;

      & > div {
        width: 100%;
      }

      .el-form-item__error {
        padding-top: 2px;
        padding-left: 8px;
        color: #ff100e;
        line-height: 14px;
      }

      .el-input {
        // height: 32px;
        box-sizing: border-box;
        line-height: 32px;

        .el-input__inner {
          border: 1px solid #dcdcdc;
          // height: 32px;
          box-sizing: border-box;
          line-height: 32px;
          // &::-webkit-input-placeholder {
          //   font-size: 14px;
          //   color: #ccc;
          // }
          // &::-ms-input-placeholder {
          //   font-size: 14px;
          //   color: #ccc;
          // }
          // &::-moz-input-placeholder {
          //   font-size: 14px;
          //   color: #ccc;
          // }
        }
      }
    }
  }

  .el-form-item.is-error {
    .el-form-item__content {
      .el-input {
        .el-input__inner {
          border: 1px solid #ff100e;
        }
      }

      .vue-treeselect__control {
        border: 1px solid #ff100e;
      }
    }
  }

  .form-item-part {
    width: var(--form-item-part);
  }
}

// 左树右表单结构
.drawer-left-right {
  .el-drawer__body {
    overflow: hidden;
    padding: 20px 0 !important;
  }
}
.dialog-left-right {
  .el-dialog {
    height: 80vh;

    &__body {
      padding: 0 !important;
      height: calc(80vh - 120px) !important;
    }
  }

  .dialog-form-table {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 90px) !important;
    border-top: 1px solid #e4e9ed;
    // border-bottom: 1px solid #e4e9ed;
    .page-tree-con {
      height: 100% !important;
      padding: 16px 16px 20px 20px;
      overflow-y: auto;
      flex: 0 0 208px;
      border-right: 1px solid #e4e9ed;

      ::v-deep.el-input--prefix {
        .el-input__inner {
          padding-left: 30px !important;
        }
      }

      .tree-scrollbar-con {
        height: auto !important;
      }
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 16px 20px;
      width: 0;
      .drawer-table-con {
        flex: 1;
        overflow: hidden;
        // padding: 0 18px;
        &.project-member {
          .el-table {
            height: calc(100% - 282px) !important;
          }
        }
        &.assessor {
          .el-table {
            height: calc(100% - 330px) !important;
          }
        }
        .el-table {
          // height: calc(100% - 330px) !important;
          .el-table__inner-wrapper {
            &:before {
              height: 0 !important;
            }
          }
        }
      }
    }
  }
}
.page-table-select {
  width: 572px;
  position: fixed;
  bottom: 80px;
  height: 127px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #d7d9db;

  .header {
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid #e4e9ed;
    &-text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #121314;
      line-height: 22px;
      padding-left: 12px;

      &::after {
        content: "";
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: var(--el-color-primary);
      }
    }
  }
  &-item {
    height: 80px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px;
    padding: 12px 16px;
    overflow-y: scroll;
    .item-container {
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      overflow: auto;

      .icon-guanbi1 {
        font-size: 12px;
        color: #9b9d9e;
        cursor: pointer;
      }

      .tag-item {
        display: flex;
        align-items: center;
        margin: 0 8px 12px 0;
        border: none;
        height: 20px;
        line-height: 20px;
        vertical-align: middle;
        background: #eceef1;
        border-radius: 2px;
        padding: 0px 8px;
        color: #2d2d2e;

        .icon-guanbi1 {
          font-size: 12px;
          color: #9b9d9e;
          cursor: pointer;
          padding-left: 5px;
        }
      }
    }
  }
}
